<template>
  <div class="container">
    <div>
      <div class="course-cover">
        <!-- 点击图片进行跳转到课程详细页面 -->
        <a href="javascript:void(0)">
          <img
            :src="cover"
          />
        </a>
      </div>
      <ul class="option-box">
        <li
          v-for="item in operateList"
          :key="item.index"
          :class="{ active: item.index == ins }"
          @click="active(item)"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import mitt from "@/plugins/mitt";
import { mapGetters } from "vuex";
import { getCourseMessage } from "@/api/course";
export default {
  props: ["courseId"],
  // 数据源
  data() {
    return {
      standardMenu: [
        {
          title: "公告",
          name: "announcement",
          index: 1,
        },
        // {
        //   title: "任务",
        //   name: "courseTask",
        //   index: 2,
        // },
        // {
        //   title: "讨论",
        //   name: "courseDiscuss",
        //   index: 3,
        // },
        {
          title: "课件",
          name: "chapters",
          index: 4,
        },
        // 考虑考试其实是作业的一种严格模式，
        {
          title: "作业",
          name: "coursehomework",
          index: 5,
        },
        // {
        //   title: "考试",
        //         name:'announcement'
        // },
        {
          title: "资料",
          name: "courseMaterial",
          index: 6,
        },
        {
          title: "成员",
          name: "memberShip",
          index: 7,
        },
        {
          title: "管理",
          name: "configeration",
          index: 8,
        },
      ],
      //课程页面负责控制课程内容的跳转
      operateList: [],
      //课程URL和对应菜单index做一个映射
      MenuMap: {
        announcement: "1",
        courseTask: "2",
        courseDiscuss: "3",
        chapters: "4",
        coursehomework: "5",
        courseMaterial: "6",
        memberShip: "7",
        configeration: "8",
      },
      //默认激活第一个
      ins: 0,
      cover:'https://cqjtu-education.oss-cn-beijing.aliyuncs.com/course_cover/6ce77a10dd3268daa7ba6c93e5e76459.jpg',
    };
  },
  //生命周期函数---
  created() {
    this.ins = this.MenuMap[this.$route.name];
    this.selectMenu();
    this.getCourse();
    mitt.on("change", () => {
      this.getCourse();
    });
  },
  mounted() {},
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.ins = this.MenuMap[this.$route.name];
      },
      deep: true,
    },
  },
  //基本方法
  methods: {
    //需要完善的地方 点击后应有一个向上滑动的动画，平滑的切换到window.top：0这样的位置
    active(item) {
      //路由跳转
      this.$router.push(item.name + "?" + "courseId=" + this.courseId);
    },
    selectMenu() {
      if (this.role == "teacher") {
        this.operateList = this.standardMenu.slice(0, this.standardMenu.length);
      } else if (this.role == "student") {
        this.operateList = this.standardMenu.slice(
          0,
          this.standardMenu.length - 1
        );
      }
    },
    getCourse() {
      getCourseMessage(this.courseId).then((res) => {
        if (res.code == 200) {
          this.cover=res.data.cover
        } else {
          ElMessage({
            type: "error",
            message: "获取课程图片失败",
          });
        }
      });
    },
  },
  //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
  computed: {
    ...mapGetters({
      role: "getRole",
    }),
  },
};
</script>

<style   scoped>
.container {
  height: 600px;
  width: 80%;
  margin-left: 10%;
}

.course-cover > a img {
  display: inline-block;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.option-box {
  margin-top: 8px;
  min-height: 250px;
  padding: 0;
  background: #ffffff;
}
.option-box li {
  cursor: pointer;
  height: 50px;
  line-height: 50px;
  list-style: none;
  padding: 0px;
  margin: 0px;
  border-bottom: 1px solid rgb(238, 238, 238);
  font-size: 18px;
}
li:hover {
  color: #00cc7e;
}
.active {
  color: #fff !important;
  background-color: #00cc7e;
}
</style>